<template>
  <div>
    <table style="width:96%; border: 1px solid silver; margin: 2%; border-radius: 5px; min-height: 600px;">
        <tr>
          <td colspan="2" style="vertical-align:top;">
            <table style="width:100%; ">
              <tr v-for="item in list">
                <td style="width:60px; text-align: right; vertical-align:top;">
                  <div v-show="item.type == 1" style="border: 1px solid silver; border-radius: 5px; padding: 5px;">
                    <div v-text="item.name"></div>
                    <div v-text="item.date"></div>
                  </div>
                </td>
                <td>
                  <div style="border: 1px solid silver; border-radius: 5px; padding: 5px; min-height: 48px;">
                    <span v-text="item.content"></span>
                  </div>
                </td>
                <td style="width:60px; vertical-align:top;">
                  <div v-show="item.type == 2" style="border: 1px solid silver; border-radius: 5px; padding: 5px;">
                    <div v-text="item.name"></div>
                    <div v-text="item.date"></div>
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
    </table>
    <table  style="width:96%; margin: 2%;">
      <tbody>
        <tr>
          <td>
            <textarea style="width:100%; border-radius: 5px;" v-model="txt_send"></textarea>
          </td>
          <td style="width:60px; vertical-align:middle;">
            <button class="btn btn-info" type="button" @click="onSend">提交</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  mounted () {
  },
  data () {
    return {
      list: [
      ],
      txt_send: ''
    }
  },
  methods: {
    onSend () {
      const self = this
      if (!this.txt_send) {
        alert('请录入相关的内容')
      } else {
        const apiUrl = 'http://www.tuling123.com/openapi/api'
        $.getJSON(apiUrl, {
          key: 'e72af38e6ab541be8a87e0e222742a6c',
          info: this.txt_send,
          userid: 'test001'
        }, function (data) {
          // console.log('------------ macheing:' + JSON.stringify(data))
          let id = self.length + 1
          let now = new Date()
          let date = `${now.getHours() > 9 ? '' : '0'}${now.getHours()}:${now.getMinutes() > 9 ? '' : '0'}${now.getMinutes()}:${now.getSeconds() > 9 ? '' : '0'}${now.getSeconds()}`
          self.list.push({ id: id, name: '游客', content: self.txt_send, date: date, type: 1 })
          self.txt_send = ''

          id = self.length + 1
          now = new Date()
          date = `${now.getHours() > 9 ? '' : '0'}${now.getHours()}:${now.getMinutes() > 9 ? '' : '0'}${now.getMinutes()}:${now.getSeconds() > 9 ? '' : '0'}${now.getSeconds()}`
          self.list.push({ id: id, name: '鸿双助手', content: data.text, date: date, type: 2 })
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .btn-default {
      color: #333;
      background-color: #fff;
      border-color: #ccc;
  }
  .btn-info:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
  }
  .btn.focus, .btn:focus, .btn:hover {
      color: #333;
      text-decoration: none;
  }
  .btn-info {
      color: #fff;
      background-color: #5bc0de;
      border-color: #46b8da;
  }
  .btn {
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
  }
</style>
